<template>
    <div class="recruitment-page">
      <!-- 1. 顶部Tab切换 -->
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部职位" name="all"></el-tab-pane>
        <el-tab-pane label="已结束" name="ended"></el-tab-pane>
        <el-tab-pane label="草稿" name="draft"></el-tab-pane>
        <el-tab-pane label="待发布" name="unpublished"></el-tab-pane>
      </el-tabs>
  
      <!-- 2. 统计与搜索条件 -->
      <el-card class="mt-20">
        <!-- 统计信息行 -->
        <el-row :gutter="20" class="stats-row">
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">投递率</div>
              <div class="stat-value">70% - 100%</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">面试率</div>
              <div class="stat-value">70% - 100%</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">待沟通</div>
              <div class="stat-value">20%以上</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">通过率</div>
              <div class="stat-value">80%</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">总数量</div>
              <div class="stat-value">300</div>
            </div>
          </el-col>
        </el-row>
  
        <!-- 筛选搜索行 -->
        <el-row :gutter="20" class="filter-row">
          <el-col :span="8">
            <el-form :inline="true" :model="searchForm" size="small">
              <el-form-item label="选择日期">
                <el-date-picker
                  v-model="searchForm.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :unlink-panels="true"
                />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="8">
            <el-form :inline="true" :model="searchForm" size="small">
              <el-form-item label="职位名称">
                <el-input
                  v-model="searchForm.jobName"
                  placeholder="请输入职位名称"
                />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="8" class="text-right">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-col>
        </el-row>
      </el-card>
  
      <!-- 3. 职位列表 -->
      <el-card class="mt-20">
        <el-table
          :data="filteredJobs"
          border
          stripe
          size="small"
          v-loading="tableLoading"
        >
          <el-table-column prop="name" label="职位名称" min-width="150" />
          <el-table-column prop="applicants" label="投递率" min-width="120" />
          <el-table-column prop="interview" label="面试率" min-width="120" />
          <el-table-column prop="statusText" label="状态" min-width="100" />
          <el-table-column prop="updateTime" label="更新时间" min-width="180" />
          <el-table-column label="操作" min-width="100">
            <template #default="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <div class="mt-20 text-right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredJobs.length"
          />
        </div>
      </el-card>
    </div>
</template>
  
<script>
  export default {
    name: 'RecruitmentPage',
    data() {
      return {
        // 当前激活的Tab
        activeTab: 'all',
        // 筛选表单
        searchForm: {
          dateRange: [],
          jobName: ''
        },
  
        // 职位列表数据（示例）
        jobList: [
          {
            name: 'UI设计',
            applicants: '95%',
            interview: '80%',
            status: 'active',
            updateTime: '2025-07-01'
          },
          {
            name: 'Java开发',
            applicants: '100%',
            interview: '70%',
            status: 'ended',
            updateTime: '2025-07-02'
          },
          {
            name: '测试工程师',
            applicants: '60%',
            interview: '50%',
            status: 'active',
            updateTime: '2025-07-03'
          }
        ],
  
        // 表格loading状态
        tableLoading: false,
  
        // 分页
        pagination: {
          currentPage: 1,
          pageSize: 10
        }
      };
    },
    computed: {
      // 根据Tab和筛选条件获取最终展示数据
      filteredJobs() {
        // 根据activeTab、searchForm等进行过滤
        let data = this.jobList.filter(item => {
          // 1. Tab过滤
          if (this.activeTab === 'ended' && item.status !== 'ended') return false;
          if (this.activeTab === 'draft' && item.status !== 'draft') return false;
          if (this.activeTab === 'unpublished' && item.status !== 'unpublished') return false;
  
          // 2. 搜索过滤
          if (this.searchForm.jobName) {
            if (!item.name.includes(this.searchForm.jobName)) return false;
          }
          // 3. 日期过滤 (如果需要根据updateTime过滤)
          if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
            const [start, end] = this.searchForm.dateRange;
            if (item.updateTime < start || item.updateTime > end) {
              return false;
            }
          }
          return true;
        });
  
        // 给 status 添加可读文本
        data = data.map(d => {
          const copy = { ...d };
          switch (copy.status) {
            case 'active':
              copy.statusText = '进行中';
              break;
            case 'ended':
              copy.statusText = '已结束';
              break;
            case 'draft':
              copy.statusText = '草稿';
              break;
            case 'unpublished':
              copy.statusText = '待发布';
              break;
            default:
              copy.statusText = '未知状态';
          }
          return copy;
        });
  
        // 简单模拟分页(在真实场景中通常后端分页或前端切片)
        const startIndex = (this.pagination.currentPage - 1) * this.pagination.pageSize;
        const endIndex = startIndex + this.pagination.pageSize;
        return data.slice(startIndex, endIndex);
      }
    },
    methods: {
      // Tab切换事件
      handleTabClick(tab) {
        this.activeTab = tab.name;
        // 切换后可清空搜索条件
        this.searchForm.dateRange = [];
        this.searchForm.jobName = '';
        this.pagination.currentPage = 1;
      },
  
      // 搜索
      handleSearch() {
        this.pagination.currentPage = 1;
      },
  
      // 重置
      handleReset() {
        this.searchForm.dateRange = [];
        this.searchForm.jobName = '';
        this.pagination.currentPage = 1;
      },
  
      // 编辑
      handleEdit(row) {
        this.$message.info(`编辑职位：${row.name}`);
      },
  
      // 删除
      handleDelete(row) {
        this.$confirm(`确定删除职位【${row.name}】吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // 真实场景中需要调用接口，这里只做演示
            this.jobList = this.jobList.filter(item => item.name !== row.name);
            this.$message.success('删除成功');
          })
          .catch(() => {
            this.$message.info('已取消删除');
          });
      },
  
      // 分页大小改变
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.pagination.currentPage = 1;
      },
  
      // 当前页改变
      handleCurrentChange(page) {
        this.pagination.currentPage = page;
      }
    }
  };
</script>
  
<style scoped>
  .recruitment-page {
    padding: 20px;
    background-color: #f5f7fa;
  }
  
  /* 通用间距 */
  .mt-20 {
    margin-top: 20px;
  }
  
  /* 统计信息 */
  .stats-row {
    margin-bottom: 20px;
  }
  .stat-item {
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
  }
  .stat-label {
    font-size: 14px;
    color: #666;
  }
  .stat-value {
    font-size: 16px;
    font-weight: bold;
    margin-top: 4px;
  }
  
  /* 搜索筛选行 */
  .filter-row {
    margin-bottom: 0; /* 让表单本身的margin控制间距 */
  }
  
  /* 表格分页区域 */
  .mt-20.text-right {
    margin-top: 20px;
    text-align: right;
  }
</style>
  